import type { FC, PropsWithChildren } from 'react'
import Icon from '../../../Icon'
import View from '../../../common/View'
import { getRgb, initvalue } from '../../../common/utils'
import { useAccentColor } from '../../../common/hooks/useAccentColor'
import { context } from '../../../common/context'

const Index: FC<PropsWithChildren<{ name: string }>> = ({ children, name }) => {
  const { resume: { customization, content }, fontScale } = context

  const { spacing, applyAccentColor, title } = customization

  const { showIcon, style, titleBkg: bkg } = title || {}
  const { fontSize, spacingFactor } = spacing
  const titleFontSize = `${((fontSize || 0) * 0.5 + initvalue.fontSize + 1) * fontScale}pt`
  const item = content[name]
  const styles: any = {
    display: 'flex',
    alignItems: 'center',
    gap: '4px',
    fontSize: titleFontSize,
    marginBottom: `${spacingFactor * 0.2 + 2}px`,
    paddingBottom: '5px',
    paddingTop: '5px',
    lineHeight: 1.2
  }

  const [color, position] = useAccentColor(name)
  if (applyAccentColor?.includes('headings') && position) {
    styles.color = color
  }
  let titleBkg = null
  let borderBottomColor = `currentColor`
  if (bkg) {
    titleBkg = getRgb(bkg)
    borderBottomColor = getRgb(bkg)
  }

  return (<View>

    {
      style === 'underline'
        ? <h3 style={styles}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: '4px', borderBottom: `2px solid ${borderBottomColor}` }}>
            {
              children || <>
                {showIcon ? <Icon name={item?.iconKey} ></Icon> : null}
                {item?.displayName}
              </>
            }
          </span>

        </h3>
        : null
    }
    {
      style === 'box'
        ? <h3 style={{ ...styles, background: titleBkg || 'rgba(0,0,0,.04)', justifyContent: 'center' }}>
          {
            children || <>
              {showIcon ? <Icon name={item?.iconKey} ></Icon> : null}
              {item?.displayName}
            </>
          }
          {/* </span> */}

        </h3>
        : null
    }
    {
      style === 'boxleft'
        ? <h3 style={{ ...styles, background: titleBkg || 'rgba(0,0,0,.04)', paddingLeft: '10px' }}>
          {
            children || <>
              {showIcon ? <Icon name={item?.iconKey} ></Icon> : null}
              {item?.displayName}
            </>
          }
        </h3>
        : null
    }
    {
      style === 'line'
        ? <h3 style={{ ...styles, borderBottom: `1px solid ${borderBottomColor}`, }}>
          {
            children || <>
              {showIcon ? <Icon name={item?.iconKey} ></Icon> : null}
              {item?.displayName}
            </>
          }
        </h3>
        : null
    }
    {
      style === 'simple' || !style
        ? <h3 style={{ ...styles, padding: 0 }}>
          {
            children || <>
              {showIcon ? <Icon name={item?.iconKey} ></Icon> : null}
              {item?.displayName}
            </>
          }
        </h3>
        : null
    }
  </View>)
}
export default Index
